<template>
  <div>
    <h2>楼层人数情况</h2>
    <div id="one" style="width: 500px;height:200px;">
      容纳后期的图表
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import  http  from "../util/api";
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

var option: EChartsOption;
onMounted(() => {
  // 获取到标签
  var chartDom = document.getElementById('one')!;
  var myChart = echarts.init(chartDom);

  http('/chartDataOne').then((res: any) => {
    console.log(res);

    let xdata = res.data.map((val: any) => val.title)//楼
    let ydata = res.data.map((val: any) => val.num)//人数

    option = {
      series: [
        // y轴文本
        {
          type: 'bar',
          // 每一条柱状的值
          data: ydata,
        }
      ],
      // 调整图标内图形的间隔
      grid: {
        top: "10%",
        left: "5%",
        bottom: "5%",
        right: "5%",
        containLabel: true

      },
      // y轴
      yAxis: {
        axisLine: {
          // 字体颜色
          lineStyle: {
            color: "#fff"
          }
        }
      },
      xAxis: {
        // x轴文本
        data: xdata,
        axisLine: {
          // 字体颜色
          lineStyle: {
            color: "#fff"
          }
        }
      },

    };

    option && myChart.setOption(option);
  })
})


</script>
<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}

/* ::v-deep h2{
    background-color: #999;

} */
#one {
  /* 高度360 */
  height: 4.3rem;
  margin: 0 auto;

  background-color: #785d5d;
}
</style>

